<template>
    <view>
        <view class="ding_ss">
            <image src="/static/img/搜索.png" class="sousuo"></image>
            <input class="input_md" type="text" placeholder="搜索昵称、用户手机号" />
        </view>

        <view class="beijing">
            <view class="yhgl_kk" v-for="(yh, index) in list" :key="index">
                <view class="yh_kk1">
                    <view class="yh_tx">
					</view>
                    <view class="yh_nk1">
                        <view class="yhm">{{ yh.nickname }}</view>
                        <view class="haoma">{{ yh.account }}</view>
                    </view>
                </view>

                <view class="yh_kk2">
                    <view class="yh_ye">余额</view>
                    <view>￥{{ yh.money }}</view>
                </view>

                <view class="yh_kk3">
                    <navigator :url="'/packageB/zhangdanmingxi/zhangdanmingxi?id=' + yh.id + '&name='+yh.nickname" class="zdmx">账单明细</navigator>
                    <view class="kc" :data-index="index" @tap="showKouchuFun">扣除</view>
                    <view class="cz" :data-index="index" @tap="showChongzhiFun">充值</view>
                </view>
            </view>
        </view>

        <!-- 充值 -->
        <view class="modal_mask" v-if="showChongzhi">
            <view class="modal_container">
                <!-- 弹窗内容 -->
                <view class="tc_h1">
                    <view>确认充值余额</view>
                </view>

                <view class="tc_nk1">
                    <view>充值金额：</view>
                    <input v-model="czmoney" class="tc_input" type="number" @input="onInputczmoney" />
                    <view>元</view>
                </view>

                <view class="tc_nk1">
                    <view>充值后金额：</view>
                    <view>{{czhmoney}}</view>
                    <view>元</view>
                </view>

                <!-- 弹窗底部按钮 -->
                <view class="tc_button">
                    <view class="tc_button_" @tap="hideModal">取消</view>
                    <view class="tc_button_" @click="submitchongzhi">确认</view>
                </view>
            </view>
        </view>

        <!-- 扣除 -->
        <view class="modal_mask" v-if="showKouchu">
            <view class="modal_container">
                <!-- 弹窗内容 -->
                <view class="tc_h1">
                    <view>确认扣除余额</view>
                </view>

                <view class="tc_nk1">
                    <view>扣除金额：</view>
                    <input v-model="kcmoney" class="tc_input" type="number" @input="onInputkcmoney" />
                    <view>元</view>
                </view>

                <view class="tc_nk1">
                    <view>扣除后金额：</view>
                    <view>{{kchmoney}}</view>
                    <view>元</view>
                </view>

                <!-- 弹窗底部按钮 -->
                <view class="tc_button">
                    <view class="tc_button_" @tap="hideModal">取消</view>
                    <view class="tc_button_" @click="submitkouchu">确认</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/yonghuguanli/yonghuguanli.js
var app = getApp();
import {wodeuserlist, woderechargekouchu} from "@/common/api";
export default {
    data() {
        return {
            showChongzhi: false,
            showKouchu: false,
            list: [],
			kcmoney: 0,
			czmoney: 0,
			kchmoney: 0,
			czhmoney: 0,
			curruser: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		this.wodeuserlist()
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        showChongzhiFun: function (option) {
			const index = option.currentTarget.dataset.index
			const user = this.list[index]
			const money = user.money
            this.setData({
                showChongzhi: true,
				curruser: user,
				czhmoney: money
            });
        },

        showKouchuFun: function (option) {
			const index = option.currentTarget.dataset.index
			const user = this.list[index]
			const money = user.money
            this.setData({
                showKouchu: true,
				curruser: user,
				kchmoney: money,
            });
        },

        hideModal: function () {
            this.setData({
                showChongzhi: false,
                showKouchu: false,
				kcmoney: 0,
				czmoney: 0,
				kchmoney: 0,
				czhmoney: 0,
				curruser: {}
            });
        },
		
		wodeuserlist(){
			const paramData = {
				checked: 1,
				store_id: app.globalData.store_id
			}
			uni.showLoading({
			    title: '加载中...'
			});
			wodeuserlist(paramData,  (res => {
				console.log(res)
				this.setData({
					list: res.data.data.list
				})
				uni.hideLoading();
			}))
		},
		submitchongzhi(){
			const paramData = {
				id: this.curruser.id,
				money: this.czhmoney,
				status: 1
			}
			uni.showLoading({
			    title: '加载中...'
			});
			woderechargekouchu(paramData, (res => {
				if(res.data.code == 0) {
					uni.showToast({
						title: "充值成功"
					});
				}else{
					uni.showToast({
						title: "充值失败"
					});
				}
				uni.hideLoading();
			}))
		},
		submitkouchu(){
			const paramData = {
				id: this.curruser.id,
				money: this.kchmoney,
				status: -1
			}
			uni.showLoading({
			    title: '加载中...'
			});
			woderechargekouchu(paramData, (res => {
				if(res.data.code == 0) {
					uni.showToast({
						title: "扣除成功"
					});
				}else{
					uni.showToast({
						title: "扣除失败"
					});
				}
				uni.hideLoading();
			}))
		},
		onInputczmoney(){
			let money = this.curruser.money + this.czmoney
			this.setData({
				czhmoney: money
			})
		},
		onInputkcmoney(){
			let money = this.curruser.money - this.kcmoney
			this.setData({
				kchmoney: money
			})
		}
    }
};
</script>
<style>
.ding_ss {
    display: flex;
    align-items: center;
    background-color: rgb(245, 243, 243);
    border-radius: 100rpx;
    width: 80%;
    margin: 10rpx 10% 20rpx 10%;
}

.ss {
    margin-left: 10rpx;
    width: 400rpx;
    height: 90rpx;
    padding-left: 14rpx;
    display: flex; /* 使用Flexbox布局 */
    background-color: rgb(245, 243, 243); /* 设置输入框背景色为灰色 */
    border-radius: 5px; /* 圆角设置为20px */
    justify-content: flex-start;
    align-items: center;
}
.sousuo {
    width: 60rpx;
    height: 75rpx;
}

.beijing {
    background-color: rgb(241, 241, 241);
    height: 100vh;
    padding: 20rpx 20rpx 20rpx 20rpx;
}

.yhgl_kk {
    background-color: rgb(255, 255, 255);
    height: 300rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 10rpx; /* 设置边框圆角 */
    margin-bottom: 20rpx;
}

.yh_kk1 {
    display: flex;
}
.yh_kk2 {
    display: flex;
    margin: 20rpx 0 10rpx 0;
    padding-bottom: 20rpx;
    color: rgb(173, 173, 173);
    border-bottom: 1px solid rgb(226, 220, 220);
    font-size: 33rpx;
}
.yh_kk3 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.yh_tx {
    width: 150rpx;
    height: 150rpx;
    background-color: skyblue;
    border-radius: 50%;
}

.yh_nk1 {
    margin-left: 20rpx;
    margin-top: 20rpx;
}

.haoma {
    color: rgb(173, 173, 173);
    font-size: 28rpx;
    margin-top: 20rpx;
}

.yh_ye {
    background-color: rgba(223, 222, 222, 0.644);
    padding: 0rpx 3rpx 0rpx 3rpx;
    margin-right: 20rpx;
}

.zdmx {
    border-radius: 100rpx; /* 圆角设置为20px */
    border: 2rpx solid rgb(187, 184, 184);
    padding: 5rpx 20rpx 5rpx 20rpx;
    color: rgb(168, 166, 166);
    margin-right: 20rpx;
}

.kc {
    border-radius: 100rpx; /* 圆角设置为20px */
    border: 2rpx solid rgba(187, 184, 184, 0.123);
    padding: 5rpx 20rpx 5rpx 20rpx;
    margin-right: 20rpx;
}

.cz {
    border-radius: 100rpx; /* 圆角设置为20px */
    border: 2rpx solid rgb(187, 184, 184);
    padding: 5rpx 20rpx 5rpx 20rpx;
    color: rgb(57, 80, 185);
    margin-right: 20rpx;
}

.modal_mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 9999;
}

.modal_container {
    width: 100%;
    background-color: #fff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    overflow: hidden;
}

.tc_h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40rpx 0 60rpx 0;
}

.tc_nk1 {
    display: flex;
    justify-content: center;
    margin: 20rpx 0 60rpx 0;
}

.tc_input {
    width: 60rpx;
    border-bottom: 1rpx solid rgb(187, 181, 181);
    margin-right: 10rpx;
}

.tc_button {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 0 80rpx 0;
}

.tc_button_ {
    background-color: rgba(235, 231, 231, 0.541);
    padding: 20rpx 40rpx 20rpx 40rpx;
}
</style>
